import Vue from 'vue'

/**
 * @name v-watermark 页面水印
 * @description 设置页面底部的水印效果
 * @author 郭磊
 * @date 2024-3-12
 */
Vue.directive("watermark", (el, binding) => {
  const addWaterMarker = (text, time, el) => {
    var canvas = document.createElement("canvas")
    canvas.width = 400
    canvas.height = 200
    var cans = canvas.getContext("2d")
    cans.rotate((-20 * Math.PI) / 180) //旋转弧度
    cans.font = "16px Microsoft JhengHei" //字体
    cans.fillStyle = "rgba(0, 0, 0, 0.1)" //字体填充颜色
    cans.textAlign = "left" //对齐方式
    cans.textBaseline = "Middle" //基线
    cans.fillText(text, canvas.width / 3, canvas.height / 2) //被填充的文本
    cans.fillText('2024-3-12', canvas.width / 3, 130) //被填充的文本
    el.style.backgroundImage = `url(${canvas.toDataURL("image/png")})` //插入背景图
  }
  const { text, time } = binding.value
  addWaterMarker(text, time, el)
})



